[Web] 在Google Map顯示多個InfoWindow

前言

由於需要顯示多個InfoWindow，但怎麼弄都只會顯示出最後一個，最後發現必須要使用Closure(閉包)，以往C++、Java等等不曾見過Closure，到了JavaScript還是第一次看到。

Closure

在函數裡的變數往往是區域變數，一但離開函數就不見了，但利用Closure就可以讓變數繼續存在，而使用方法乍看之下也只是把程式拉出函數運作而已。

程式

直接用現在正在做的當例子

失敗的程式碼

var setMarker = function(){
	var length = resultList.length ;
	for ( var i = 0 ; i < length ; i ++ ){
		var marker = new google.maps.Marker({
			position: new google.maps.LatLng(resultList[i].latitude,resultList[i].longitude),
			map: map, 
			title: resultList[i].ssid 
		});
		var content = 'SSID : ' + resultList[i].ssid + '</br>MAC : ' + resultList[i].mac + '</br>Level : ' + resultList[i].level 
					 + '</br>Latitude : ' + resultList[i].latitude + '</br>Longitude : ' + resultList[i].longitude ;
		var infowindow = new google.maps.InfoWindow({
			content: content ,
			size: new google.maps.Size(200, 200)
		});
		google.maps.event.addListener(marker, 'click', function() {
			infowindow.open(marker.get('map'), marker);
		});
	}
}

成功的程式碼

var setMarker = function(){
	var length = resultList.length ;
	for ( var i = 0 ; i < length ; i ++ ){
		var marker = new google.maps.Marker({
			position: new google.maps.LatLng(resultList[i].latitude,resultList[i].longitude),
			map: map, 
			title: resultList[i].ssid 
		});
		var content = 'SSID : ' + resultList[i].ssid + '</br>MAC : ' + resultList[i].mac + '</br>Level : ' + resultList[i].level 
					 + '</br>Latitude : ' + resultList[i].latitude + '</br>Longitude : ' + resultList[i].longitude ;
		attachSecretMessage(marker,content) ;
	}
}
function attachSecretMessage(marker, content) {
	var infowindow = new google.maps.InfoWindow({
		content: content ,
		size: new google.maps.Size(200, 200)
	});
	google.maps.event.addListener(marker, 'click', function() {
		infowindow.open(marker.get('map'), marker);
	});
}

心得

其實也只是拉出函數來而已，但這種特性還是第一次遇到，真是才疏學淺 …